<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./console.js"></script>
    <title>Document</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        
        li {
            line-height: 35px;
        }
        
        .li {
            background-color: #f7f7f7;
            border-radius: 4px;
        }
        
        h1.console {
            padding: 10px;
            background-color: #ccc;
        }
        
        .console li {
            list-style: none;
        }
        
        .li ul li {
            list-style: none;
        }
        
        h1 span {
            font-size: 12px;
            padding-left: 15px;
            color: blue;
        }
    </style>
</head>

<body>
    <h1 class="console">console.js基础用法<span>按【F12】查看console控制台输出信息</span></h1>
    <div class="console">
        <ol>

            <li>引入console.js文件</li>

            <li>$$.console('信息'); //控制台输出信息</li>

            <li>$$.clear(); //清除控制台信息，js语句最后用 </li>

            <li>$$.clear(数组，信息颜色类型); //格式 信息颜色类型：info,success,error,warning</li>
            </0l>
    </div>

    <h1 class="console">console.js案例配置参数</h1>
    <div class="console">
        <ol>

            <li>$$.default="#484848", //默认颜色</li>

            <li>$$.info="#1475b2", //信息颜色</li>

            <li>$$.success="green", //成功颜色</li>

            <li>$$.error="red", //错误颜色</li>

            <li>$$.warning="#fa0", //警告颜色</li>

            <li>$$.center="#696969" //中间元素颜色</li>
        </ol>
    </div>


    <h1 class="console">console.js案例</h1>
    <div class="console">
        <ol>
            <li>$$.console(["没有信息颜色类型字符串"]);</li>
            <li>$$.console(["1数组+信息颜色类型"], "error");</li>
            <li>$$.console(["2数组+信息颜色类型", _o = {_c: _c}], "error");</li>
            <li>$$.console(["2数组+信息颜色类型", "第二个"], "error");</li>
            <li>$$.console(["3数组+信息颜色类型", "第二个", "第三个"], "success");</li>
            <li>$$.console("字符串");</li>
            <li>$$.console("多字符串会一起显示", "第二个字符串", "第三个字符串");</li>
            <li>$$.console();</ol>
    </div>

    <h2>console控制台输出信息基本用法</h2>
    <div class="li">
        <ol>
            <li> console.log('最常见用法\n换行');</li>
            <li> console.error('输出错误信息 会以红色显示');</li>
            <li> console.warn('打印警告信息 会以黄色显示');</li>
            <li> console.info('打印一般信息');</li>
            <li> console.clear();//清空上面的console显示</li>
            <li> %s 占位符</li>
            <li> %d 或 %i 整数</li>
            <li> %f 浮点数</li>
            <li> %o%O object对象</li>
            <li> %c css样式</li>
        </ol>
    </div>
    <h2>console控制台输出信息</h2>
    <div class="li">
        <ul>
            <li>var _data = new Date().toLocaleDateString()</li>
            <li>var _c = "abcd"; //字符串</li>
            <li>var _d = 123; //整数</li>
            <li>var _i = 789; //整数</li>
            <li>var _f = 45.6; //浮点数</li>
            <li>var _cl = "color:#fff;background:#484848;padding:3px 8px;border-top-left-radius: 4px;border-bottom-left-radius: 4px;"; //css样式 左侧提示样式</li>
            <li>var _cc = "color:#fff;background:#02906f;padding:3px 8px"; //css样式 中间提示样式</li>
            <li>var _cinfo = "color:#fff;background:#1475b2;padding:3px 8px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;"; //css样式 右侧信息样式</li>
            <li>var _csuccess = "color:#fff;background:green;padding:3px 8px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;"; //css样式 右侧成功信息样式</li>
            <li>var _cerror = "color:#fff;background:red;padding:3px 8px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;"; //css样式 右侧错误信息样式</li>
            <li>var _cwarn = "color:#fff;background:#fa0;padding:3px 8px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;"; //css样式 右侧警告信息样式</li>
            <li>var _o = {_c: _c}; //object</li>
            <li>console.log("%c%s%c%s%c%s", _cl, _data, _cc, "正常输出样式", _cinfo, _c);</li>
            <li>console.log("%c%s%c%s%c%s", _cl, _data, _cc, "成功输出样式", _csuccess, _d);</li>
            <li>console.log("%c%s%c%s%c%s", _cl, _data, _cc, "错误输出样式", _cerror, _d);</li>
            <li>console.log("%c%s%c%s%c%d", _cl, _data, _cc, "警告输出样式", _cwarn, _d);</li>
            <li>console.log("%c%s%c%s%c%s", _cl, _data, _cc, "字符串%s输出", _cinfo, _c);</li>
            <li>console.log("%c%s%c%s%c%d", _cl, _data, _cc, "正数%d输出", _cinfo, _d);</li>
            <li>console.log("%c%s%c%s%c%i", _cl, _data, _cc, "正数%i输出", _cinfo, _i);</li>
            <li>console.log("%c%s%c%s%c%f", _cl, _data, _cc, "浮点数%f输出", _cinfo, _f);</li>
            <li>console.log("%c%s%c%s%c%o", _cl, _data, _cc, "对象%o输出", _cinfo, document.body);</li>
            <li>console.log("%c%s%c%s%c%O", _cl, _data, _cc, "对象%O输出", _cinfo, document.body);</li>
            <li>console.log("%c%s%c%s%c%O", _cl, _data, _cc, "对象输出", _cinfo, _o);</li>
        </ul>
    </div>


    <div>
        <li>版权声明：从此处开始以下的文字为CSDN博主「idjl」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。</li>
        <li>原文链接：https://blog.csdn.net/u010071211/java/article/details/83864718</li>
        <li>————————————————</li>
        <li>//基本用法</li>
        <li>console.log('最常见用法\n换行');</li>
        <li>console.error('输出错误信息 会以红色显示');</li>
        <li>console.warn('打印警告信息 会以黄色显示');</li>
        <li>console.info('打印一般信息');</li>
        <li>console.clear();//清空上面的console显示</li>



        <li>//进阶用法</li>
        <li>//console.assert(bool,”info”) 如果bool为false 打印出info 否则不打印</li>
        <li>console.assert(false,'判断为false才显示的信息');</li>
        <li>//传入的对象或数组以表格方式显示</li>
        <li>console.table([['中国','美国'],['好']]);</li>
        <li>//打印 调用链 fn2()调用fn1()，fn1()调用fn()</li>
        <li>function fn(){ console.trace(); }</li>
        <li>function fn1(){ fn(); }</li>
        <li>function fn2(){ fn1(); }</li>
        <li>fn2();</li>
        <li>//格式化输出</li>
        <li>/*</li>
        <li>console.log支持的格式标志有:</li>
        <li>%s 占位符</li>
        <li>%d 或 %i 整数</li>
        <li>%f 浮点数</li>
        <li>%o%O object对象</li>
        <li>%c css样式</li>
        <li>*/</li>
        <li>console.log('%d + %d = %d',1,2,3);</li>
        <li>//%o%O打印dom节点时就不一样</li>
        <li>console.log('%o',document.body);</li>
        <li>console.log('%O',document.body);</li>
        <li>// %c 后面的内容，增加css样式</li>
        <li>//附：console.log输出的超链接会被自动识别并加上灰色字体颜色和下划线的样式，而这个无法用%c覆盖</li>
        <li>console.log('123 %c 456','font-size:36px;color:red;');</li>
        <li>console.log('123 %c 4 http://www.google.com 56 %c 789','font-size:20px;color:#ff8400;','font-size：12px;color:#000');</li>
        <li>//利用css样式加载图片</li>
        <li>//没法直接设置width和height样式,line-height图片高度,再调padding</li>
        <li>console.log('%c ','background-image:url("http://iyeslogo.orbrand.com/150902Google/005.gif");background-size:120% 120%;background-repeat:no-repeat;background-position:center center;line-height:60px;padding:30px 120px;');</li>



        <li>//高级用法</li>
        <li>//计时，单位毫秒</li>
        <li>console.time();</li>
        <li>for(var i=0;i
            <100000;i++){</li>
                <li>var j=i*i;</li>
                <li>}</li>
                <li>console.timeEnd();</li>
                <li>//统计代码或函数被调用了多少次</li>
                <li>var fn_ = function(){ console.count('hello world'); }</li>
                <li>for(var i=0;i
                    <5;i++){</li>
                        <li>fn_();</li>
                        <li>}</li>
                        <li>//查看内存使用情况，是属性，不带括号</li>
                        <li>//console.memory;</li>
                        <li>//在浏览器开发者工具中使用</li>
                        <li>//分组输出，可嵌套</li>
                        <li>console.group('分组1');</li>
                        <li>console.log('语文');</li>
                        <li>console.log('数学');</li>
                        <li>console.group('其他科目');</li>
                        <li>console.log('化学');</li>
                        <li>console.log('地理');</li>
                        <li>console.log('历史');</li>
                        <li>console.groupEnd('其他科目');</li>
                        <li>console.groupEnd('分组1');</li>
                        </ul>
    </div>
    <script>
        //<li>%d 或 %i 整数</li><li>%f 浮点数</li> %o%O object %c css样式
        var _data = new Date().toLocaleDateString()
        var _c = "abcd"; //字符串
        var _d = 123; //整数
        var _i = 789; //整数
        var _f = 45.6; //浮点数
        var _cl = "color:#fff;background:#484848;padding:3px 8px;border-top-left-radius: 4px;border-bottom-left-radius: 4px;"; //css样式  左侧提示样式
        var _cc = "color:#fff;background:#696969;padding:3px 8px"; //css样式  中间提示样式
        var _cinfo = "color:#fff;background:#1475b2;padding:3px 8px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;"; //css样式  右侧信息样式
        var _csuccess = "color:#fff;background:green;padding:3px 8px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;"; //css样式  右侧成功信息样式
        var _cerror = "color:#fff;background:red;padding:3px 8px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;"; //css样式  右侧错误信息样式
        var _cwarn = "color:#fff;background:#fa0;padding:3px 8px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;"; //css样式  右侧警告信息样式
        var _o = {
            _c: _c
        }; //object

        console.log("%c%s%c%s%c%s", _cl, _data, _cc, "正常输出样式", _cinfo, _c);
        console.log("%c%s%c%s%c%f", _cl, _data, _cc, "成功输出样式", _csuccess, _d);
        console.log("%c%s%c%s%c%s", _cl, _data, _cc, "错误输出样式", _cerror, _d);
        console.log("%c%s%c%s%c%d", _cl, _data, _cc, "警告输出样式", _cwarn, _d);
        console.log("%c%s%c%s%c%s", _cl, _data, _cc, "字符串%s输出", _cinfo, _c);
        console.log("%c%s%c%s%c%d", _cl, _data, _cc, "正数%d输出", _cinfo, _d);
        console.log("%c%s%c%s%c%i", _cl, _data, _cc, "正数%i输出", _cinfo, _i);
        console.log("%c%s%c%s%c%f", _cl, _data, _cc, "浮点数%f输出", _cinfo, _f);
        console.log("%c%s%c%s%c%o", _cl, _data, _cc, "对象%o输出", _cinfo, document.body);
        console.log("%c%s%c%s%c%O", _cl, _data, _cc, "对象%O输出", _cinfo, document.body);
        console.log("%c%s%c%s%c%o", _cl, _data, _cc, "对象%O输出", _cinfo, _o);
        $$.console(["以上为console控制台输出信息样式"], "error");
        console.log("");
        console.log("");
        console.log("");
        $$.console(["以下为console.js案例封装样式"], "error");
        $$.console(["没有信息颜色类型字符串"]);
        $$.console(["1数组+信息颜色类型"], "error");
        $$.console(["2数组+信息颜色类型", _o], "error");
        $$.console(["2数组+信息颜色类型", "第二个"], "error");
        $$.console(["3数组+信息颜色类型", "第二个", "第三个"], "success");
        $$.console("字符串");
        $$.console("多字符串会一起显示", "第二个字符串", "第三个字符串");
        $$.console();
    </script>
</body>

</html>